<template>
  <div class="home">
	  <div class="left">
	  <p class="one">热门城市</p>
	<ul class="frist">
		<li>北京</li>
		<li>上海</li>
		<li>天津</li>
		<li>合肥</li>
		<li>郑州</li>
	</ul>
	<p>A</p>
	<ul class="xuhao">
		<li>阿克苏</li>
		<li>安康</li>
		<li>安庆</li>
	</ul>
	<p>B</p>
	<ul class="xuhao">
		<li>白山</li>
		<li>白城</li>
		<li>宝鸡</li>
	</ul>
	<p>C</p>
	<ul class="xuhao">
		<li>沧州</li>
		<li>长春</li>
		<li>昌吉</li>
	</ul>
	<p>D</p>
	<ul class="xuhao">
		<li>大理</li>
		<li>大连</li>
		<li>大庆</li>
	</ul>
	<p>E</p>
	<ul class="xuhao">
		<li>鄂尔多斯</li>
		<li>恩施</li>
		<li>鄂州</li>
	</ul>
		</div>
	
	<div id="right">
		<div >
		<span @click="btn(A)">A</span>
		<span @click="btn(B)">B</span>
		<span @click="btn(C)">C</span>
		<span @click="btn(D)">D</span>
		<span @click="btn(E)">E</span>
		</div>
	</div>
	</div>
  
</template>


<style scoped>
	.home{
		background-color: #ffd8bd;
		height: 100%;
		width: 100%;
		margin-bottom: 200px;
		display: flex;
		
	}
	/* #content{
		position: absolute;
	} */
	.left{
		flex: 1;
	}
	#right{
		display: flex;
		flex-direction: column;
		background-color: #EEEEEE;
		width: 10%;
		/* text-align: center; */
		align-items: center;
		justify-content: center;
		
	}
	#right div{
		display: flex;
		flex-direction: column;
		height: auto;
		/* background-color: #EEEEEE; */
		/* width: 10%; */
		/* text-align: center; */
		align-items: center;
		justify-content: center;
		position: fixed;
		/* right: 0px; */
		top: 45%;
	}
	span{
		margin: 10px;
	}
	P{
		background-color: #CCCCCC;
		height: 30px;
		font-size: 20px;
		font-weight: bold;
		line-height: 30px;
		padding-left: 10px;
		/* width: 100vw; */
		margin-top: 10px;
	}
	.frist{
		display: flex;
		flex-wrap: wrap;
	}
	.frist li{
		background-color: #EEEEEE;
		font-size: 25px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 110px;
		margin: 15px 10px;
	}
	.xuhao li{
		font-size: 20px;
		margin: 15px 10px;
		height: 40px;
		line-height: 40px;
		font-weight: bold;
	}
	
</style>
<script>

</script>

